<script setup>
import {useRoute, useRouter} from "vue-router";
import {logout} from "@/api/quit.js"
import {ElButton, ElMessage} from "element-plus";
import {useUserStore} from"@/stores/user.js"
import { getRefereeCom } from '@/api/user.js'
import { ref, onMounted } from 'vue';

const router=useRouter()
//定义跳转函数
const backIndex=()=>{
  router.push('/')
}
//跳转到个人信息页面
const goInfo=()=>{
  router.push('/user/userInfo')
}

//退出功能
const userStore=useUserStore()
const quit=()=>{
  try{
    //后端发送退出请求
    logout()
    //清楚前端存储数据
    userStore.clearUserData()
    router.push('/')
    ElMessage.success("退出成功")
  }catch (err){
    ElMessage.error("退出失败!"+"错误为："+err.message)
    console.log(err.message)
  }
}

//获取我报名裁判的比赛
const userId = ref('');
const proList = ref([])

const list = async () => {
  try {
    const resp = await getRefereeCom(userId.value); // 使用获取到的 userId
    proList.value = resp.data.projects
    console.log(proList.value)
    // ElMessage.success("获取数据成功")
  } catch (error) {
    ElMessage.error("获取用户信息失败");
  }
};

const formatDate = (dateString) => {
  const date = new Date(dateString);
  const year = date.getFullYear();
  const month = String(date.getMonth() + 1).padStart(2, '0');
  const day = String(date.getDate()).padStart(2, '0');
  return `${year}-${month}-${day}`;
};

const isBeforeEventTime = (eventTime) => {
  const now = new Date();
  return new Date(eventTime) > now;
};

//跳转到打分页面并传递信息过去
const gotoScore=(project)=>{
  const path = project.type == 0 ?'/match/gerenScore' :'/match/teamScore';
  router.push({
    path: path,
    query:{projectId:project.projectId,
      name: project.name,
    }
  });
};

onMounted(() => {
  // 获取 URL 查询参数
  const params = new URLSearchParams(window.location.search);
  userId.value = params.get('userId'); 

  // 确保 userId 不为空
  if (userId.value) {
    list(); // 调用获取用户信息的函数
  }
});
</script>
<template>
  <el-card class="page-container">
    <div style="display: flex">
      <div class="header" style="height: 70px;font-size: 30px;margin-left: 60px">
        <span style="line-height: 70px;font-family: '黑体', 'Heiti SC', sans-serif;font-weight: bold">评分管理</span>
      </div>

      <div style="line-height: 70px;margin-left: 1100px" @click="backIndex">
        <span>回到首页</span>
      </div>
      <div style="line-height: 70px;margin-left: 5px" @click="goInfo">
        <span>| 个人信息</span>
      </div>
      <div style="line-height: 70px;margin-left: 5px" @click="quit">
        <span>| 退出</span>
      </div>
    </div>
    <div style="height: 60px;background-color: #9ac7f7"></div>
    <div style="display: flex">
      <div style="min-height:720px;width: 200px;margin-top: 10px"></div>
      <div style="min-height:720px;margin-top: 10px;width:1300px;display: flex;gap: 10px;flex-wrap: wrap;justify-content: center;">
        <!-- 遍历 proList 显示比赛项目 -->
        <div v-for="(project, index) in proList" :key="index">
          <el-card :style="{ height: '230px', width: '500px' }" class="dynamic-color-card">
            <el-descriptions title="赛事信息" style="display: flex; flex-direction: column; height: 100%;">
              <el-descriptions-item label="比赛项目:">{{ project.name }}</el-descriptions-item>
              <el-descriptions-item label="比赛地点:">{{ project.place }}</el-descriptions-item>
              <el-descriptions-item label="赛事类型:">{{ project.type == 0  ? '个人赛' : '团队赛' }}</el-descriptions-item>
              <el-descriptions-item label="男子/女子:">{{ project.gtype == 0 ? '女子' : '男子' }}</el-descriptions-item>
              <el-descriptions-item label="比赛时间:">{{ formatDate(project.eventTime) }}</el-descriptions-item>
            </el-descriptions>
            <div style="margin-top: 10px; text-align: left;">
              <span>
                比赛状态: 
                {{ isBeforeEventTime(project.eventTime) ? '未开始' : '已结束' }}
              </span>
            </div>
            <div style="text-align: center; margin-top: 10px;">
              <el-button 
                type="danger" 
                @click="gotoScore(project)" 
                :disabled="isBeforeEventTime(project.eventTime)"
              >
                去打分
              </el-button>
            </div>
          </el-card>
        </div>
      </div>
      <div style="min-height:720px;margin-top: 10px;width: 200px;"></div>
    </div>
  </el-card>
</template>

<style lang="scss" scoped>

/* 动态颜色样式 */
@keyframes colorChange {
  0% {
    background-color: hsl(0, 70%, 80%);
  }
  25% {
    background-color: hsl(90, 70%, 80%);
  }
  50% {
    background-color: hsl(180, 70%, 80%);
  }
  75% {
    background-color: hsl(270, 70%, 80%);
  }
  100% {
    background-color: hsl(360, 70%, 80%);
  }
}

.dynamic-color-card {
  animation: colorChange 10s infinite;
  color: black; /* 字体颜色保持黑色，确保对比度 */
  transition: transform 0.3s ease; /* 添加平滑过渡效果 */

  /* 鼠标悬停时放大 */
  &:hover {
    transform: scale(1.10); /* 放大5% */
  }
}


</style>